<template>
    <div v-if="JSON.stringify(dataInfo) !== '{}'">
        <el-empty v-show="!dataInfo" :image-size="200"/>
        <sk-article label="项目编号" :value="dataInfo.no"/>
        <sk-article label="项目简介" :value="dataInfo.profiles"/>
        <sk-article label="项目负责人" :value="dataInfo.hostStudentName"/>
        <sk-article label="第一指导教师" :value="dataInfo.hostInstructorName"/>
        <sk-article label="项目成员数" :value="dataInfo.studentNumber"/>
        <sk-article label="项目成熟度" :value="dataInfo.maturity"/>
        <sk-article label="学校科技成果转化" :value="dataInfo.achievementIsTransform?'是':'否'"/>
        <sk-article label="参赛申报人为科技成果的第一完成人或所有人"
                    :value="dataInfo.declarerIsAchievementOwner?'是':'否'"/>
        <sk-article label="项目发布时间" :value="formattedDate(dataInfo.startTime)"/>
        <sk-article label="项目进度" :value="entryStatus[dataInfo.projectEntryStatus]"/>
        <sk-article label="备注" :value="dataInfo.remark"/>
        <sk-article label="报销额度" :value="dataInfo.reimbursementLimit"/>
        <sk-article label="项目文件" v-if="authority">
            <ul v-if="dataInfo.resourceFileList && dataInfo.resourceFileList.length">
                <li style="display: flex;justify-content: space-between"
                    v-for="resource in dataInfo.resourceFileList"
                >
                    <el-button link @click="preview(resource.url)">
                        <el-icon :size="20"><Document/></el-icon>
                        {{ resource.filename }}
                    </el-button>
                    <span>
                        <el-button link @click="download(resource)">
                            <el-icon :size="20"><Download/></el-icon>下载
                        </el-button>
                    </span>
                </li>
            </ul>
        </sk-article>
    </div>
    <el-empty v-else :image-size="200"/>
    <el-dialog v-model="show" title="预览" width="100%" @close="isWord = false">
        <vue-office-docx
            v-loading="loading"
            v-if="isWord"
            :src="resourceUrl"
            @rendered="handleRenderedDocx"
        />
        <vue-office-pdf
            v-loading="loading"
            v-if="!isWord"
            :src="resourceUrl"
            @rendered="handleRenderedPdf"
        />
    </el-dialog>
</template>

<script setup>
import {ref} from 'vue'
import VueOfficePdf from "@vue-office/pdf";
import VueOfficeDocx from "@vue-office/docx";
import '@vue-office/docx/lib/index.css'
import {Document, Download} from "@element-plus/icons-vue";

import SkArticle from "@/components/SkArticle.vue";
import {getProjectEntryStatus} from "@/apis/enum";

const props = defineProps(["dataInfo","authority"])
const entryStatus = getProjectEntryStatus()

let loading = ref(true)
const download = resource => {
    let a = document.createElement('a');
    let event = new MouseEvent('click');
    a.download = resource.filename
    a.href = resource.url
    a.dispatchEvent(event);
}
let show = ref(false)
let resourceUrl = ref("")
let isWord = ref(false)
const preview = url => {
    loading.value = true
    isWord.value = url.includes("docx")
    resourceUrl.value = url
    show.value = true
}
const handleRenderedDocx = () => {
    loading.value = false
}
const handleRenderedPdf = () => {
    loading.value = false
}
//日期格式化
const formattedDate = date => {
    if (!date) return
    date = new Date(date)
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`
}
</script>

<style scoped>

</style>